<template>
  <BaseFilter class="number-range-filter" :label="label">
    <template #right>
      <van-row type="flex" align="end" v-if="(dataList || []).length > 6">
        <van-icon :name="isExpand ? 'arrow-down' : 'arrow-up'" color="#999999" size="12px" @click="isExpand = !isExpand">
          <span style="margin-right: 5px;">{{ isExpand ? '收起' : '展开' }}</span>
        </van-icon>
      </van-row>
    </template>
    <van-row gutter="8">
      <van-col :span="24">
        <van-row class="number-input" type="flex" align="center" style="margin-top: 8px;">
          <input class="number" :value="minValue" type="number" @change="(min) => onChange(min, maxValue)" />
          <div class="gutter" />
          <input class="number" :value="maxValue" type="number" @change="(max) => onChange(minValue, max)" />
        </van-row>
      </van-col>
      <van-col :span="8" v-for="data in validDataList" :key="data.id">
        <div class="select-item" @click="onItemClick(data)">
          {{ data.name}}
        </div>
      </van-col>
    </van-row>
  </BaseFilter>
</template>

<script>
import BaseFilter from './BaseFilter.vue';

export default {
  name: '',
  props: {
    label: {
      type: String
    },
    value: {
      type: [Array]
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    BaseFilter
  },
  data () {
    return {
      isExpand: false
    }
  },
  methods: {
    onChange (min, max) {
      let minValue;
      if (min) minValue = min.target ? min.target.value : min;
      let maxValue;
      if (max) maxValue = max.target ? max.target.value : max;
      minValue = (minValue !== '') ? Number(minValue) : undefined;
      maxValue = (maxValue !== '') ? Number(maxValue) : undefined;
      this.$emit('input', [minValue, maxValue]);
      this.$emit('change', [minValue, maxValue]);
    },
    onItemClick (data) {
      this.onChange(data.min, data.max);
    }
  },
  computed: {
    validDataList () {
      if (!Array.isArray(this.dataList)) return [];
      return this.isExpand ? this.dataList : this.dataList.slice(0, 6);
    },
    minValue () {
      return Array.isArray(this.value) ? this.value[0] : undefined;
    },
    maxValue () {
      return Array.isArray(this.value) ? this.value[1] : undefined;
    }
  }
}
</script>

<style scoped>
  .number-range-filter .van-icon-arrow-down:before {
    content: none;
  }
  .number-range-filter .van-icon-arrow-down:after {
    content: '\e65e';
  }
  .number-range-filter .van-icon-arrow-up:before {
    content: none;
  }
  .number-range-filter .van-icon-arrow-up:after {
    content: '\e65f';
  }
  .select-item {
    margin-top: 8px;
    height: 36px;
    line-height: 36px;
    background: #F6F7F9;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    color: #333333;
    cursor: pointer;
    box-sizing: border-box;
  }
  .gutter {
    height: 1px;
    width: 12px;
    background: #999999;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0px 6px;
  }
  .number-input .number {
    height: 36px;
    background: #F6F7F9;
    border-radius: 4px;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
    text-align: center;
    border: none;
    color: #999999;
  }
</style>
